<template>
  <view class="sort">
    <view
      v-for="(item, index) in sortList"
      :key="item.title"
      :class="{ active: currentIndex === index }"
      class="sort__tab"
      @click="handleChangeSort(index)"
    >
      {{ item.title }}
    </view>
    <view :class="{ active: currentIndex && currentIndex >= sortList.length }" class="sort__price sort__tab" @click="handleChangeSort(3)">
      <view style="margin-right: 10rpx">价格</view>
      <view class="sort__flex">
        <QIcon :color="currentIndex === 3 ? '#f12f22' : '#999999'" class="sort__top" name="icon-shangjiantou1" />
        <QIcon :color="currentIndex === 4 ? '#f12f22' : '#999999'" class="sort__bottom" name="icon-shangjiantou1" />
      </view>
    </view>
  </view>
  <scroll-view :refresher-threshold="30" :style="{ height: scrollViewHeight }" scroll-y @scrolltolower="emit('initList', true)">
    <view style="padding: 14rpx; background: #f2f2f2">
      <u-waterfall v-if="list.length" ref="waterFallRef" v-model="list" idKey="productId" :addTime="0">
        <template #left="{ leftList }">
          <view v-for="(item, index) in leftList" :key="index" class="water_item" style="position: relative" @click="handleItemClick(item)">
            <u-lazy-load :image="item.pic" :index="index" border-radius="20" threshold="-450"></u-lazy-load>
            <view v-if="isSoldOut(item.stockTypes, item.stocks)" class="sell-out">
              <image :src="selloutImg" alt="" class="sell-out__img" />
            </view>
            <HighlightRetrieveComUnit :good-name="item.highLight" :price="item.salePrices" :sale-volume="Number(item.salesVolume)" />
          </view>
        </template>
        <template #right="{ rightList }">
          <view v-for="(item, index) in rightList" :key="index" class="water_item" style="position: relative" @click="handleItemClick(item)">
            <u-lazy-load :image="item.pic" :index="index" border-radius="20" threshold="-450"></u-lazy-load>
            <view v-if="isSoldOut(item.stockTypes, item.stocks)" class="sell-out">
              <image :src="selloutImg" alt="" class="sell-out__img" />
            </view>
            <HighlightRetrieveComUnit :good-name="item.highLight" :price="item.salePrices" :sale-volume="Number(item.salesVolume)" />
          </view>
        </template>
      </u-waterfall>
      <u-loadmore v-if="list.length" :status="loadMoreStatus" />
      <q-empty v-if="!list.length && !list.length" :background="emptyConfig.background" :title="emptyConfig.title" />
    </view>
  </scroll-view>
</template>

<script lang="ts" setup>
import QIcon from '@/components/q-icon/q-icon.vue'
import QEmpty from '@/components/qszr-core/packages/components/q-empty/q-empty.vue'
import HighlightRetrieveComUnit from '@/components/highlight-retrieve-com-unit/highlight-retrieve-com-unit.vue'
import { computed, onMounted, PropType, ref } from 'vue'
import type { RetrieveOrderByParams } from '@/apis/good'
import { jumpGoods } from '@/utils/navigateToShopInfo'
import { useVModel } from '@vueuse/core'
import { isSoldOut } from '@/utils/util'

const selloutImg = 'https://medusa-small-file-1253272780.cos.ap-shanghai.myqcloud.com/s2b2c_2.0.8/2024/12/96756530de4b0dd23f6b86f35.png'

const emit = defineEmits(['updateorderByParams', 'initList', 'update:list'])

const $props = defineProps({
  list: {
    type: Array as PropType<any[]>,
    default: () => [],
  },
  loadMoreStatus: {
    type: String,
    default: 'nomore',
  },
})

const list = useVModel($props, 'list', emit)
const currentIndex = ref<number | null>(null)
// 排序列表
const sortList = [
  {
    title: '综合排序',
  },
  {
    title: '销量',
  },
  {
    title: '新品',
  },
]
// 排序key
const enumSortKey: RetrieveOrderByParams = [
  [
    { order: 'salesVolume', sort: 'DESC' },
    { order: 'createTime', sort: 'DESC' },
  ],
  { order: 'salesVolume', sort: 'DESC' },
  { order: 'createTime', sort: 'DESC' },
  { order: 'salePrices', sort: 'ASC' },
  { order: 'salePrices', sort: 'DESC' },
]
// 更改排序
const handleChangeSort = (idx: number) => {
  if (idx >= sortList.length) {
    currentIndex.value = currentIndex.value === 3 ? 4 : 3
  } else {
    currentIndex.value = idx
  }
  if (currentIndex.value === 0) {
    // 综合排序
    emit('updateorderByParams', [enumSortKey[1], enumSortKey[2]])
  } else {
    emit('updateorderByParams', [enumSortKey[currentIndex.value]])
  }
  emit('initList')
}

const waterFallRef = ref()
const searchNode = uni.upx2px(70)
const sortNode = uni.upx2px(120)
const navNode = uni.upx2px(88)
const safeHeight = ref(0)

onMounted(() => {
  uni.getSystemInfo({
    success: (res) => {
      if (res.safeAreaInsets) {
        const systermInfo = uni.getSystemInfoSync()
        safeHeight.value = systermInfo.screenHeight - (res.safeArea?.bottom ?? 0)
      }
    },
  })
})

const systermInfo = uni.getSystemInfoSync()
// 可视区域滑动高度计算
const scrollViewHeight = computed(() => {
  return `${systermInfo.screenHeight - (navNode + searchNode + sortNode + safeHeight.value)}px`
})

const handleItemClick = (e: any) => {
  jumpGoods(e.shopId, e.productId)
}

const emptyConfig = {
  title: '商品不存在',
  background: 'https://medusa-small-file-1253272780.cos.ap-shanghai.myqcloud.com/gruul/20220531/1ce266a5e3fb43a4ae9b764fd8a166df.png',
}
const refresh = () => {
  waterFallRef.value?.clear()
}
defineExpose({
  refresh,
})
</script>

<style lang="scss" scoped>
@include b(sort) {
  background: #fff;
  height: 114rpx;
  padding: 0 8px;
  @include flex(space-between);
  font-size: 24rpx;
  @include e(tab) {
    width: 171.5rpx;
    height: 64rpx;
    background: #f3f3f3;
    font-size: 28rpx;
    border-radius: 32rpx;
    text-align: center;
    line-height: 64rpx;
  }
  @include e(price) {
    @include flex();
  }
  @include e(flex) {
    display: flex;
    flex-direction: column;
  }
  @include e(bottom) {
    line-height: 14rpx;
    transform: rotate(180deg) scale(0.6);
  }
  @include e(top) {
    line-height: 14rpx;
    transform: scale(0.6);
  }
}

.active {
  color: #f12f22;
  background: #ffe8e8;
  font-weight: bold;
}

@include b(sell-out) {
  position: absolute;
  top: 0;
  width: 100%;
  height: 78%;
  background: rgba(0, 0, 0, 0.5);
  @include flex();
  @include e(img) {
    display: block;
    width: 234rpx;
    height: 181.11rpx;
  }
}
</style>
